import React from 'react';
import { Card, Table, Tag, Button, Space, Breadcrumb, message } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './Notice.module.less';

interface NoticeData {
  id: string;
  title: string;
  time: string;
  status: 'unread' | 'read';
  type: string;
}

const Notice: React.FC = () => {
  const navigate = useNavigate();

  const columns = [
    {
      title: '通知标题',
      dataIndex: 'title',
      key: 'title',
      render: (text: string, record: NoticeData) => (
        <Space>
          {text}
          {record.status === 'unread' && <Tag color="red">未读</Tag>}
        </Space>
      ),
    },
    {
      title: '通知类型',
      dataIndex: 'type',
      key: 'type',
      render: (text: string) => <Tag color="orange">{text}</Tag>,
    },
    {
      title: '发送时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: unknown, record: NoticeData) => (
        <Button 
          type="link" 
          onClick={() => navigate(`/formal-acceptance/notice/${record.id}`)}
        >
          查看详情
        </Button>
      )
    },
  ];

  const data: NoticeData[] = [
    {
      id: '1',
      title: '关于XX项目正式验收工作的通知',
      time: '2024-03-15 10:30',
      status: 'unread',
      type: '验收通知'
    },
    // ... 更多数据
  ];

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: '档案正式验收',
          },
          {
            title: '验收通知',
          }
        ]} />
      </div>

      <Card 
        title="验收通知" 
        className={styles.noticeCard}
        extra={
          <Button type="primary" onClick={() => message.success('已全部标记为已读')}>
            全部标记已读
          </Button>
        }
      >
        <Table
          columns={columns}
          dataSource={data}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showTotal: total => `共 ${total} 条`,
            showQuickJumper: true,
            showSizeChanger: true
          }}
        />
      </Card>
    </MainLayout>
  );
};

export default Notice; 